{% extends 'base.html' %}

{% block title %}Tic Tac Toe{% endblock %}

{% block contents %}
<h1>3T - Tic Tac Toe</h1>
<h2>Games Available</h2>
<div class="games">
<ol>
{% for game in games %}
<li> <a href="{{game.get_absolute_url}}">{{game.name}}</a> - Last update : {{game.updated_on|timesince}} ago </li>
{% endfor %}
</ol>
</div>

<h2>Create new game:</h2>
<form id="form" method="post">
    <label id="label">Name : <input id="name" type="text" name="name"/></label> <input type="submit" value="Create"/>
    <div id="error"></div>
</form>
{% endblock %}

{% block scripts %}
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1"); // Load jQuery
    google.setOnLoadCallback(function(){
        $("#form").submit(function(){
            if($("input#name").val() == '') { $("#error").hide().text("Please enter a game name!").fadeIn("fast"); return false; }
        });
    });
</script>
{% endblock %}